@import 'setting';

html, body, p, ul, h1, h2, h3, h4, h5, h6 { margin: 0;}
ul, ol { padding: 0; list-style: none;}
img { max-width: 100%; height: auto;}

a { text-decoration: none; color: $black;
  &:hover { color: $primary;}
}

.cf { @extend %clearfix;}

.fL { float: left;}
.fR { float: right;}

.fi { position: relative; top: 2px; font-size: 16px;}

i.I { @extend %inline-block; margin: 0 8px; color: $gray;}

a, input, textarea, .confirming { transition: all 0.3s ease-out;}

h1, h2, h3, h4 { font-weight: normal; line-height: 1;}
h1 { font-size: 30px;}
h2 { font-size: 24px;}
h3 { font-size: 18px;}
h4, h5, h6 { font-size: 14px; font-weight: bold;}

i, em { font-style: normal;}

.screen-reader-text { display: none;}

// form
.required { color: $red;}
textarea, input { border: 1px solid $grayLight; background: $white; font-family: $baseFontFamily;
    &:focus { outline: none; border-color: $yellow;}
}
input { line-height: 27px; padding: 3px 10px 2px; width: 220px;
    &.submit { width: auto;}
}
textarea { padding: 8px 10px; line-height: 1.8;}
button, .submit { border: 1px solid $yellow; background: $yellow; color: $white; line-height: 27px; padding: 3px 15px 2px;}
